<?xml version="1.0"?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
 			xmlns:c="http://java.sun.com/jsp/jstl/core"
 			xmlns="http://www.w3.org/1999/xhtml"
 			version="2.1">
 
 <jsp:directive.page contentType="text/html" pageEncoding="UTF-8" />
 <jsp:directive.page isELIgnored="false" />
 <jsp:output 	omit-xml-declaration="false" 
 			 	doctype-root-element="HTML" 
 				doctype-system="about:legacy-compat" />
 
 <jsp:useBean id="datosLogin" class="es.javamyadmin.beans.LoginBean" scope="session" />
 
 <jsp:useBean id="listaTablesBean" class="es.javamyadmin.beans.ListaTablesBean" scope="session" />

<html>
<head>

<link rel="icon" href="${pageContext.request.contextPath}/images/icons/favicon.png" type="image/x-icon"/>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icons/favicon.png" type="image/x-icon" />

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/java-admin.css" media="screen" />

<script type="text/javascript" src="${pageContext.request.contextPath}/js/crearTablas.js" charset="UTF-8"><!-- A --></script>
<script src="${pageContext.request.contextPath}/js/jquery.js"><!-- N --></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-transition.js"><!-- N --></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-modal.js"><!-- N --></script>
<script src="${pageContext.request.contextPath}/js/ajaxCargarMsjConfirmacion.js"><!-- N --></script>

<title>JavaMyAdmin</title>

<script>
	$(document).ready(function() {
		$('#windowTitleDialog').bind('show', function () {
			
		});
	});
	function closeDialog () {
		$('#windowTitleDialog').modal('hide'); 
	};
	function okClicked () {
		closeDialog ();
	};	
</script>

</head>

<body onload="cargarTablas('${listaTablesBean.user}','${listaTablesBean.pass}','${listaTablesBean.host}','${listaTablesBean.port}','${listaTablesBean.database}');">
<div id="wrapper">
<div id="todo">

<div id="contenedor">
	
	<jsp:include page="../includes/sidebar-left.jsp" />
	
	<div id="contenido">
	
		<jsp:include page="../includes/cabecera.jsp" />
		
		<h2>Base de Datos: <c:out value="${listaTablesBean.database}"></c:out></h2>
		
		<jsp:include page="../includes/menu-superior.jsp" />
		
		<!-- Errores -->
		<c:if test="${error!=null}"><div id="ko"  class="aviso"><div class="pro_aviso ko"><p>${error }<c:if test="${descripcion != null}"><a id="especial" data-toggle="modal" href="#windowTitleDialog" onclick="cargarDatosMsj('6', '${descripcion}', '');" style="font-size:'10px'; "> (más)</a></c:if></p></div></div></c:if>
		<c:if test="${ok!=null}"><div class="aviso"><div class="pro_aviso ok"><p><c:out value="${ok}"></c:out></p></div></div></c:if>
		
		<!-- VENTANA EMERGENTE DE CONFIRMACIÓN -->
		<div id="windowTitleDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
			<!-- se cargará el mensaje por ajax -->
		</div>
		
		<form action="${pageContext.request.contextPath}/crearTabla" method="post">
			<label for="nombreCampoTabla">Nombre de la tabla </label> <input id="nombreCampoTabla" type="text" class="campo" name="nombreTabla" value="${nombreTabla}"/>
			<input type="hidden" id="numCamposTabla" name="numCampos" value="${numCampos }"/>
			<input type="hidden" name="user" value="${listaTablesBean.user }"/>
			<input type="hidden" name="database" value="${listaTablesBean.database }"/>
			<input type="hidden" name="pass" value="${listaTablesBean.pass }"/>
			<input type="hidden" name="port" value="${listaTablesBean.port }"/>
			<input type="hidden" name="host" value="${listaTablesBean.host }"/>
			<table id="crearTabla">
				<tr>
					<th  style="border-radius: 5px 0 0 0;">Nombre</th>
					<th>Tipo</th>
					<th>Longitud</th>
					<th>Predeterminado</th>
					<th>Atributos</th>
					<th>Nulo</th>
					<th>Primary key</th>
					<th style="border-radius: 0 5px 0 0;">A_I</th>
				</tr>
			
				<c:forEach var="i" begin="1" end="${numCampos }">
				   	<tr id="fila${i }">
				   		<td align="center"><input class="campo" type="text" name="nombreCampo${i}"/></td>
				   		<td align="center">
				   			<select class="campo" style="width: 130px;" name="tipo${i}">
				   				<option value="VARCHAR">VARCHAR</option>
				   				<option value="TINYINT">TINYINT</option>
				   				<option value="TEXT">TEXT</option>
				   				<option value="DATE">DATE</option>
				   				<option value="SMALLINT">SMALLINT</option>
				   				<option value="MEDIUMINT">MEDIUMINT</option>
				   				<option value="INT">INT</option>
				   				<option value="BIGINT">BIGINT</option>
				   				<option value="FLOAT">FLOAT</option>
				   				<option value="DOUBLE">DOUBLE</option>
				   				<option value="DECIMAL">DECIMAL</option>
				   				<option value="DATETIME">DATETIME</option>
				   				<option value="TIMESTAMP">TIMESTAMP</option>
				   				<option value="TIME">TIME</option>
				   				<option value="YEAR">YEAR</option>
				   				<option value="DOUBLE">DOUBLE</option>
				   				<option value="CHAR">CHAR</option>
				   				<option value="TINYBLOB">TINYBLOB</option>
				   				<option value="TINYTEXT">TINYTEXT</option>
				   				<option value="BLOB">BLOB</option>
				   				<option value="MEDIUMBLOD">MEDIUMBLOD</option>
				   				<option value="MEDIUMTEXT">MEDIUMTEXT</option>
				   				<option value="LONGBLOB">LONGBLOB</option>
				   				<option value="LONGTEXT">LONGTEXT</option>
				   				<option value="ENUM">ENUM</option>
				   				<option value="SET">SET</option>
				   			</select>
				   		</td>
				   		<td align="center"><input class="campo" style="width: 40px;" type="text" name="longitud${i}"/></td>
				   		<td align="center"><input type="text" name="default${i}" value="null"/></td>
				   		<td align="center">
				   			<select class="campo" name="atributos${i}">
				   				<option value="BINARY">BINARY</option>
				   				<option value="UNSIGNED">UNSIGNED</option>
				   				<option value="UNSIGNED ZEROFILL">UNSIGNED ZEROFILL</option>
				   			</select>
				   		</td>
				   		<td align="center"><input type="checkbox" name="nulo${i}"/></td>
				   		<td align="center">
				   			<select class="campo" name="atr${i}" id="atri${i }" onchange="atr(${i })">
				   				<option value="">----</option>
				   				<option value="PRIMARY KEY">PRIMARY</option>
				   				<option value="UNIQUE">UNIQUE</option>
				   				<option value="INDEX">INDEX</option>
				   				<option value="FULL TEXT">FULL TEXT</option>
				   			</select>
				   		</td>
				   		<td align="center"><input id="a_i${i}" type="checkbox" name="a_i${i}" disabled="disabled"/></td>
				   	</tr>
				</c:forEach>
		 	</table>
		 	<button id="aniadir" onclick="aumentarCampo(${numCampos })" type="button" class="boton">Añadir campo</button>
		 	<c:if test="${numCampos == 1}">
		 		<button id="quitar" disabled="disabled" onclick="quitarCampo(${numCampos })" type="button" class="boton botonDesactivado">Quitar campo</button>
		 	</c:if>
		 	<c:if test="${numCampos != 1}">
		 		<button id="quitar" onclick="quitarCampo(${numCampos })" type="button" class="boton">Quitar campo</button>
		 	</c:if>
		 	<table>
		 		<tr>
					<th>Motor de almacenamiento</th>
				</tr>
			 	<tr>
			 		<td align="center">
			  			<select class="campo" name="motorAlmacenamiento" >
					   		<option value="innoDB">innoDB</option>
					   		<option value="CSV">CSV</option>
					   		<option value="MRG_MYISAM">MRG_MYISAM</option>
					   		<option value="BLACKHOLE">BLACKHOLE</option>
					   		<option value="MYISAM">MYISAM</option>
					   		<option value="MEMORY">MEMORY</option>
					   		<option value="ARCHIVE">ARCHIVE</option>
					   	</select>
					</td>
			 	</tr>
		 	</table>
		 	<input class="boton" type="submit" value="CREAR TABLA"/>
	 	</form>	
	</div>

</div>

</div>
</div>
</body>
</html>
</jsp:root>
